<template>
  <div class="edit-container">
    <!-- 操作按钮区域 -->
    <a-card :bordered="false" class="action-buttons-card mb-6">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <icon-info-circle class="text-blue-600" />
          <span class="text-sm text-gray-600">请填写完整信息后提交</span>
        </div>
        <a-space>
          <a-button
            type="primary"
            :loading="submitLoading"
            @click="submitForm"
          >
            <template #icon><icon-plus /></template>
            提交申请
          </a-button>
          <a-button @click="goBack">
            <template #icon><icon-arrow-left /></template>
            返回
          </a-button>
        </a-space>
      </div>
    </a-card>

    <!-- 表单内容 -->
    <div class="form-container">
      <a-form
        ref="formRef"
        :label-col-props="{ span: 6 }"
        :model="formData"
        :rules="rules"
        :wrapper-col-props="{ span: 18 }"
        auto-label-width
        label-align="right"
      >
        <!-- 基本信息 -->
        <a-divider orientation="left">基本信息</a-divider>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="enterpriseAccountId" label="企业账号" required>
              <a-select
                v-model="formData.enterpriseAccountId"
                :loading="enterpriseLoading"
                allow-clear
                allow-search
                placeholder="请选择企业账号"
              >
                <a-option
                  v-for="item in enterpriseList"
                  :key="item.enterpriseAccountId"
                  :label="item.enterpriseName"
                  :value="item.enterpriseAccountId"
                >
                  {{ item.enterpriseName }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="projectName" label="项目名称" required>
              <a-input
                v-model="formData.projectName"
                allow-clear
                placeholder="请输入项目名称"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="projectLocation" label="项目地址" required>
              <a-input
                v-model="formData.projectLocation"
                allow-clear
                placeholder="请输入项目地址"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="projectType" label="项目类型" required>
              <a-select
                v-model="formData.projectType"
                allow-clear
                placeholder="请选择项目类型"
              >
                <a-option
                  v-for="(d, index) in dicts[proxy.DICT.lindiProjectType]"
                  :key="index"
                  :label="d.dictValue"
                  :value="String(d.dictKey)"
                />
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="money" label="项目金额(万元)">
              <a-input
                v-model="formData.money"
                class="w-full"
                placeholder="请输入项目金额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="reason" label="购买理由" required>
              <a-input
                v-model="formData.reason"
                allow-clear
                placeholder="请输入购买理由"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="applicationTime" label="申请时间">
              <a-date-picker
                v-model="formData.applicationTime"
                class="w-full"
                format="YYYY-MM-DD HH:mm:ss"
                show-time
                placeholder="请选择申请时间"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 指标信息 -->
        <a-divider orientation="left">指标信息</a-divider>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="reserveArea" label="市储备库指标(亩)">
              <a-input
                v-model="formData.reserveArea"
                class="w-full"
                placeholder="请输入市储备库指标"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="publicForestArea" label="省级公益林(亩)">
              <a-input
                v-model="formData.publicForestArea"
                class="w-full"
                placeholder="请输入省级公益林"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 项目情况 -->
        <a-divider orientation="left">项目情况</a-divider>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item field="projectSituation" label="情况简介" required>
              <a-textarea
                v-model="formData.projectSituation"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                placeholder="请输入情况简介"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 项目文件管理 -->
        <a-divider orientation="left">项目文件管理</a-divider>

        <!-- 红线图上传区域 -->
        <div class="file-upload-section">
          <div class="section-header mb-4">
            <h3 class="text-lg font-medium text-gray-800 mb-2">项目红线图</h3>
            <p class="text-sm text-gray-500">
              请上传项目红线图，支持JPG、PNG、JPEG格式
            </p>
          </div>

          <!-- 文件上传组件 -->
          <a-form-item class="mb-6" field="redlineFileId" label="红线图">
            <uploadFile
              ref="redlineMapUploadFileRef"
              :file-list="redlineFileList"
              :file-source="fs.redlineMap"
              :limit="1"
              :multiple="false"
              accept=".jpg,.png,.jpeg"
              list-type="picture"
              source-type="proxy"
              @upload-success="handleUploadSuccess"
            />
          </a-form-item>

          <!-- 已有红线图展示区域 -->
          <div v-if="existingRedlineFiles.length > 0" class="mb-4">
            <a-form-item class="mb-0" label="已有红线图">
              <div class="existing-files-container">
                <div class="mb-3 flex items-center">
                  <icon-info-circle class="mr-2 text-green-500" />
                  <span class="text-sm font-medium text-gray-700"
                    >已上传的红线图文件</span
                  >
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div
                    v-for="file in existingRedlineFiles"
                    :key="file.fileId"
                    class="file-item-card"
                  >
                    <a-card class="file-card h-full" hoverable>
                      <div class="flex items-start space-x-3">
                        <div class="file-icon flex-shrink-0">
                          <a-avatar
                            :size="48"
                            class="bg-gray-100"
                            shape="square"
                          >
                            <icon-file-image class="text-blue-600" />
                          </a-avatar>
                        </div>
                        <div class="flex-1 min-w-0">
                          <div class="font-medium text-gray-900 truncate mb-1">
                            {{ file.fileName }}
                          </div>
                          <div class="text-xs text-gray-500 mb-3">
                            上传时间：{{ file.uploadTime || "未知" }}
                          </div>
                          <div class="flex flex-wrap gap-2">
                            <a-button
                              size="mini"
                              type="primary"
                              @click="downloadRedlineFile(file)"
                            >
                              <template #icon>
                                <icon-download />
                              </template>
                              下载
                            </a-button>
                            <a-button
                              size="mini"
                              @click="previewRedlineFile(file)"
                            >
                              <template #icon>
                                <icon-eye />
                              </template>
                              预览
                            </a-button>
                            <a-button
                              size="mini"
                              status="danger"
                              @click="removeExistingRedlineFile(file)"
                            >
                              <template #icon>
                                <icon-delete />
                              </template>
                              删除
                            </a-button>
                          </div>
                        </div>
                      </div>
                    </a-card>
                  </div>
                </div>
              </div>
            </a-form-item>
          </div>
        </div>

        <!-- 相关附件上传区域 -->
        <div class="file-upload-section">
          <div class="section-header mb-4">
            <h3 class="text-lg font-medium text-gray-800 mb-2">相关附件</h3>
            <p class="text-sm text-gray-500">
              支持格式：PDF、Word、Excel、图片（JPG、PNG、JPEG），最多上传10个文件
            </p>
          </div>

          <!-- 文件上传组件 -->
          <a-form-item class="mb-6" field="attachmentFileIds" label="附件上传">
            <uploadFile
              ref="attachmentsUploadFileRef"
              :file-list="attachmentFileList"
              :file-source="fs.attachments"
              :limit="10"
              :multiple="true"
              accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png,.jpeg"
              list-type="text"
              @upload-success="handleUploadSuccess"
              source-type="proxy"
            />
          </a-form-item>

          <!-- 已有附件展示区域 -->
          <div v-if="existingAttachmentFiles.length > 0" class="mb-4">
            <a-form-item class="mb-0" label="已有附件">
              <div class="existing-files-container">
                <div class="mb-3 flex items-center">
                  <icon-info-circle class="mr-2 text-green-500" />
                  <span class="text-sm font-medium text-gray-700"
                    >已上传的附件文件</span
                  >
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div
                    v-for="file in existingAttachmentFiles"
                    :key="file.fileId"
                    class="file-item-card"
                  >
                    <a-card class="file-card h-full" hoverable>
                      <div class="flex items-start space-x-3">
                        <div class="file-icon flex-shrink-0">
                          <a-avatar
                            :size="48"
                            class="bg-gray-100"
                            shape="square"
                          >
                            <icon-file-pdf
                              v-if="file.fileType === 'pdf'"
                              class="text-red-600"
                            />
                            <icon-file-image
                              v-else-if="
                                ['jpg', 'png', 'jpeg'].includes(file.fileType)
                              "
                              class="text-blue-600"
                            />
                            <icon-file v-else class="text-gray-600" />
                          </a-avatar>
                        </div>
                        <div class="flex-1 min-w-0">
                          <div class="font-medium text-gray-900 truncate mb-1">
                            {{ file.fileName }}
                          </div>
                          <div class="text-xs text-gray-500 mb-3">
                            上传时间：{{ file.uploadTime || "未知" }}
                          </div>
                          <div class="flex flex-wrap gap-2">
                            <a-button
                              size="mini"
                              type="primary"
                              @click="downloadAttachmentFile(file)"
                            >
                              <template #icon>
                                <icon-download />
                              </template>
                              下载
                            </a-button>
                            <a-button
                              size="mini"
                              @click="previewAttachmentFile(file)"
                            >
                              <template #icon>
                                <icon-eye />
                              </template>
                              预览
                            </a-button>
                            <a-button
                              size="mini"
                              status="danger"
                              @click="removeExistingAttachmentFile(file)"
                            >
                              <template #icon>
                                <icon-delete />
                              </template>
                              删除
                            </a-button>
                          </div>
                        </div>
                      </div>
                    </a-card>
                  </div>
                </div>
              </div>
            </a-form-item>
          </div>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  defineEmits,
  defineProps,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import { Message, Modal } from "@arco-design/web-vue";
import {
  IconArrowLeft,
  IconDelete,
  IconDownload,
  IconEye,
  IconFile,
  IconFileImage,
  IconFilePdf,
  IconInfoCircle,
  IconPlus,
} from "@arco-design/web-vue/es/icon";
import {
  addTradeApplicationApi,
  getTradeApplicationByTradeApplicationIdApi,
  updateTradeApplicationByTradeApplicationIdApi,
} from "~/api/lindi/tradeApplication.js";
import { getEnterpriseAccountListApi } from "~/api/lindi/enterpriseAccount.js";
import uploadFile from "~/components/uploadFile/index.vue";
import { fileSource } from "~/utils/sys.js";
import { deleteFileApi } from "~/api/basic/file.js";

// 定义props
const props = defineProps({
  tradeApplicationId: {
    type: String,
    default: "",
  },
});

// 定义事件
const emit = defineEmits(["cancel", "ok"]);

// 全局实例
const { proxy } = getCurrentInstance();

// 字典数据
const dicts = proxy.LoadDicts([proxy.DICT.lindiProjectType]);

// 文件上传列表
const redlineFileList = ref([]);
const attachmentFileList = ref([]);

// 加载状态
const loading = ref(false);
const submitLoading = ref(false);
const enterpriseLoading = ref(false);

// 表单引用
const formRef = ref(null);

// 企业列表
const enterpriseList = ref([]);

// 已有文件列表
const existingRedlineFiles = ref([]);
const existingAttachmentFiles = ref([]);

// uploadFile组件引用
const redlineMapUploadFileRef = ref(null);
const attachmentsUploadFileRef = ref(null);

// 跟踪新上传的文件ID，用于取消时清理
const newUploadedFileIds = ref([]);

// 是否为编辑模式
const isEdit = computed(() => !!props.tradeApplicationId);

// 文件源配置
const fs = {
  redlineMap: fileSource.lindi_redline_img?.key,
  attachments: fileSource.lindi_trade_attachment?.key,
};

// 表单数据
const formData = reactive({
  tradeApplicationId: "",
  enterpriseAccountId: null,
  projectName: "",
  projectLocation: "",
  tradeCode: "",
  reserveArea: "",
  publicForestArea: "",
  projectType: "", // 项目类型
  money: "", // 项目金额
  reason: "", // 购买理由
  projectSituation: "",
  redlineMapFile: null, // 添加红线图文件字段
  redlineMapId: null,
  otherFiles: [],
});

// 表单规则
const rules = {
  enterpriseAccountId: [{ required: true, message: "请选择企业账号" }],
  projectName: [
    { required: true, message: "请输入项目名称" },
    { maxLength: 100, message: "项目名称长度不能超过100个字符" },
  ],
  projectLocation: [
    { required: true, message: "请输入项目地址" },
    { maxLength: 200, message: "项目地址长度不能超过200个字符" },
  ],
  projectType: [{ required: true, message: "请选择项目类型" }],
  money: [],
  reason: [{ required: true, message: "请输入购买理由" }],
  projectSituation: [{ required: true, message: "请输入情况简介" }],
};

// 返回列表页
const goBack = async () => {
  await cleanupUnusedFiles();
  emit("cancel");
};

// 清理未使用的文件
const cleanupUnusedFiles = async () => {
  for (const fileId of newUploadedFileIds.value) {
    try {
      await deleteFileApi(fileId);
    } catch (error) {
      console.error("删除文件失败:", error);
    }
  }
  newUploadedFileIds.value = [];
};

// 处理文件上传成功
const handleUploadSuccess = (response) => {
  if (response && response.fileId && !isEdit.value) {
    newUploadedFileIds.value.push(response.fileId);
  }
};

// 加载企业列表
const loadEnterpriseList = () => {
  enterpriseLoading.value = true;
  getEnterpriseAccountListApi()
    .then((res) => {
      enterpriseList.value = res || [];
    })
    .catch((error) => {
      console.error("获取企业列表失败:", error);
      Message.error("获取企业列表失败");
    })
    .finally(() => {
      enterpriseLoading.value = false;
    });
};

// 获取交易申请详情
const getTradeApplicationDetail = () => {
  if (!props.tradeApplicationId) {
    return;
  }
  loading.value = true;
  getTradeApplicationByTradeApplicationIdApi(props.tradeApplicationId)
    .then((res) => {
      console.log("获取交易申请详情成功:", res);

      // 处理红线图文件
      if (res.redlineMapFile) {
        existingRedlineFiles.value = [res.redlineMapFile];
        // 设置红线图文件列表用于上传组件回显
        const redlineFileInfo = {
          uid: res.redlineMapFile.fileId || Date.now().toString(),
          name: res.redlineMapFile.fileName,
          url: res.redlineMapFile.fileUrl,
          status: "done",
          response: { fileId: res.redlineMapFile.fileId },
        };
        redlineFileList.value = [redlineFileInfo];
      } else {
        existingRedlineFiles.value = [];
        redlineFileList.value = [];
      }

      // 处理相关附件
      if (
        res.otherFilesVO &&
        Array.isArray(res.otherFilesVO) &&
        res.otherFilesVO.length > 0
      ) {
        existingAttachmentFiles.value = res.otherFilesVO;
        // 设置附件文件列表用于上传组件回显
        const attachmentFiles = res.otherFilesVO.map((item) => ({
          uid: item.fileId || Date.now().toString(),
          name: item.fileName,
          url: item.fileUrl,
          status: "done",
          response: { fileId: item.fileId },
        }));
        attachmentFileList.value = attachmentFiles;
      } else {
        existingAttachmentFiles.value = [];
        attachmentFileList.value = [];
      }

      Object.assign(formData, res);
    })
    .catch((error) => {
      console.error("获取交易申请详情失败:", error);
      Message.error("获取交易申请详情失败");
    })
    .finally(() => {
      loading.value = false;
    });
};

// 提交表单
const submitForm = () => {
  formRef.value.validate((errors) => {
    if (errors) {
      return;
    }
    submitLoading.value = true;

    // 创建提交数据的副本
    const submitData = { ...formData };

    // 获取上传文件的ID
    submitData.redlineMapId =
      redlineMapUploadFileRef.value?.getUploadFileId() || null;
    console.log("submitData.redlineMapId", submitData.redlineMapId);
    // 获取附件ID列表
    const attachmentIds =
      attachmentsUploadFileRef.value?.getUploadFileId() || [];

    // 获取已有附件的ID列表
    const existingAttachmentIds = existingAttachmentFiles.value
      .map((file) => file.fileId)
      .filter(Boolean);

    // 合并已有附件和新上传的附件ID
    let allAttachmentIds = [...existingAttachmentIds];

    // 处理新上传的附件ID
    if (Array.isArray(attachmentIds)) {
      // 处理数组中可能包含逗号分隔的ID字符串
      const newIds = attachmentIds
        .flatMap((id) => {
          if (typeof id === "string" && id.includes(",")) {
            // 如果ID是包含逗号的字符串，拆分为多个ID
            return id.split(",").filter(Boolean);
          }
          return id;
        })
        .filter(Boolean);
      allAttachmentIds = [...allAttachmentIds, ...newIds];
    } else if (attachmentIds) {
      // 如果是单个ID或逗号分隔的ID字符串
      if (typeof attachmentIds === "string" && attachmentIds.includes(",")) {
        allAttachmentIds = [
          ...allAttachmentIds,
          ...attachmentIds.split(",").filter(Boolean),
        ];
      } else {
        allAttachmentIds = [...allAttachmentIds, attachmentIds];
      }
    }

    // 去重并过滤空值
    submitData.otherFiles = [...new Set(allAttachmentIds)].filter(Boolean);

    // 数值类型转换
    if (submitData.reserveArea !== "") {
      submitData.reserveArea = Number(submitData.reserveArea);
    }

    if (submitData.publicForestArea !== "") {
      submitData.publicForestArea = Number(submitData.publicForestArea);
    }

    if (submitData.money !== "") {
      submitData.money = Number(submitData.money);
    }

    // 确保projectType是数字类型
    if (
      submitData.projectType !== null &&
      submitData.projectType !== undefined
    ) {
      if (typeof submitData.projectType !== "number") {
        submitData.projectType = Number(submitData.projectType);
      }
    }

    // 根据是否有ID决定是新增还是更新
    const savePromise = submitData.tradeApplicationId
      ? updateTradeApplicationByTradeApplicationIdApi(submitData)
      : addTradeApplicationApi(submitData);

    savePromise
      .then(() => {
        Message.success("保存成功");
        newUploadedFileIds.value = []; // 清理文件ID列表
        emit("ok");
      })
      .catch((error) => {
        console.error("保存失败:", error);
        Message.error("保存失败");
      })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
};

// 上传红线图文件
const handleRedlineMapUpload = (options) => {
  const { fileItem } = options;
  // 模拟上传成功
  setTimeout(() => {
    formData.redlineMapFile = {
      fileId: Date.now().toString(),
      fileName: fileItem.name,
      fileUrl: URL.createObjectURL(fileItem.file),
      fileSize: fileItem.file.size,
      fileType: fileItem.name.split(".").pop(),
    };
    Message.success("上传成功");
  }, 1000);
  return false; // 阻止默认上传行为
};

// 移除红线图文件
const handleRedlineMapRemove = () => {
  formData.redlineMapFile = null;
};

// 红线图文件上传相关函数
const customRedlineUpload = (options) => {
  const { fileItem } = options;
  // 模拟上传成功
  setTimeout(() => {
    const fileInfo = {
      uid: Date.now().toString(),
      name: fileItem.file.name,
      url: URL.createObjectURL(fileItem.file),
      size: fileItem.file.size,
      type: fileItem.file.type,
    };
    redlineFileList.value = [fileInfo];
    formData.redlineMapFile = {
      fileId: fileInfo.uid,
      fileName: fileInfo.name,
      fileUrl: fileInfo.url,
      fileSize: fileInfo.size,
      fileType: fileInfo.name.split(".").pop(),
    };
    Message.success("上传成功");
  }, 1000);
  return false; // 阻止默认上传行为
};

// 预览红线图文件
const handleRedlinePreview = (file) => {
  window.open(file.url);
};

// 移除红线图文件
const handleRedlineRemove = () => {
  redlineFileList.value = [];
  formData.redlineMapFile = null;
};

// 附件上传相关函数
const customAttachmentUpload = (options) => {
  const { fileItem } = options;
  // 模拟上传成功
  setTimeout(() => {
    const fileInfo = {
      uid: Date.now().toString(),
      name: fileItem.file.name,
      url: URL.createObjectURL(fileItem.file),
      size: fileItem.file.size,
      type: fileItem.file.type,
    };
    attachmentFileList.value.push(fileInfo);
    Message.success("上传成功");
  }, 1000);
  return false; // 阻止默认上传行为
};

// 预览附件
const handleAttachmentPreview = (file) => {
  window.open(file.url);
};

// 移除附件
const handleAttachmentRemove = (file) => {
  const index = attachmentFileList.value.findIndex(
    (item) => item.uid === file.uid
  );
  if (index !== -1) {
    attachmentFileList.value.splice(index, 1);
  }
};

// 下载红线图文件
const downloadRedlineFile = (file) => {
  if (file.fileUrl) {
    const link = document.createElement("a");
    link.href = file.fileUrl;
    link.download = file.fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    Message.error("文件下载链接不存在");
  }
};

// 预览红线图文件
const previewRedlineFile = (file) => {
  if (file.fileUrl) {
    window.open(file.fileUrl, "_blank");
  } else {
    Message.error("文件预览链接不存在");
  }
};

// 删除已有红线图文件
const removeExistingRedlineFile = (file) => {
  Modal.confirm({
    title: "确认删除",
    content: `确定要删除红线图文件 "${file.fileName}" 吗？`,
    onOk: () => {
      existingRedlineFiles.value = existingRedlineFiles.value.filter(
        (f) => f.fileId !== file.fileId
      );
      formData.redlineFileId = null;
      Message.success("删除成功");
    },
  });
};

// 下载附件文件
const downloadAttachmentFile = (file) => {
  if (file.fileUrl) {
    const link = document.createElement("a");
    link.href = file.fileUrl;
    link.download = file.fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    Message.error("文件下载链接不存在");
  }
};

// 预览附件文件
const previewAttachmentFile = (file) => {
  if (file.fileUrl) {
    window.open(file.fileUrl, "_blank");
  } else {
    Message.error("文件预览链接不存在");
  }
};

// 删除已有附件文件
const removeExistingAttachmentFile = (file) => {
  Modal.confirm({
    title: "确认删除",
    content: `确定要删除附件文件 "${file.fileName}" 吗？`,
    onOk: () => {
      existingAttachmentFiles.value = existingAttachmentFiles.value.filter(
        (f) => f.fileId !== file.fileId
      );
      // 更新表单数据中的附件ID列表
      if (formData.attachmentFileIds) {
        formData.attachmentFileIds = formData.attachmentFileIds.filter(
          (id) => id !== file.fileId
        );
      }
      Message.success("删除成功");
    },
  });
};

// 初始化页面数据
onMounted(() => {
  loadEnterpriseList();
  if (props.tradeApplicationId) {
    getTradeApplicationDetail();
  }
});
</script>

<style scoped>
.edit-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg-1);
}

/* 操作按钮卡片样式 */
.action-buttons-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 工具类样式 */
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.space-x-2 > * + * {
  margin-left: 0.5rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-blue-600 {
  color: #2563eb;
}

.text-gray-600 {
  color: #4b5563;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.top-bar {
  padding: 16px 24px;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.form-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--color-bg-1);
}

:deep(.arco-form) {
  background-color: var(--color-bg-2);
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border-2);
}

:deep(.arco-form-item-label) {
  font-weight: 500;
  color: var(--color-text-1);
}

:deep(.arco-input),
:deep(.arco-select-view),
:deep(.arco-textarea) {
  border-radius: 6px;
  transition: all 0.2s ease;
}

:deep(.arco-input:hover),
:deep(.arco-select-view:hover),
:deep(.arco-textarea:hover) {
  border-color: var(--color-primary-light-4);
}

:deep(.arco-input:focus),
:deep(.arco-select-view-focus),
:deep(.arco-textarea:focus) {
  border-color: var(--color-primary-6);
  box-shadow: 0 0 0 2px var(--color-primary-light-1);
}

:deep(.arco-btn) {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

:deep(.arco-upload-list-item) {
  border-radius: 6px;
  border: 1px solid var(--color-border-2);
}

:deep(.arco-upload-list-item:hover) {
  border-color: var(--color-primary-light-4);
}

/* 按钮区域样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border-2);
  background-color: var(--color-bg-1);
}

.action-buttons :deep(.arco-space) {
  gap: 16px;
}

.action-buttons :deep(.arco-btn) {
  min-width: 88px;
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.action-buttons :deep(.arco-btn-secondary) {
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  color: var(--color-text-1);
}

.action-buttons :deep(.arco-btn-secondary:hover) {
  background-color: var(--color-fill-2);
  border-color: var(--color-border-3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-buttons :deep(.arco-btn-secondary:active) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 文件上传组件样式优化 */
:deep(.upload-file-container) {
  border-radius: 8px;
  border: 1px dashed var(--color-primary-light-4);
  background: linear-gradient(
    135deg,
    var(--color-primary-light-1) 0%,
    var(--color-primary-light-2) 100%
  );
  transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
  position: relative;
  overflow: hidden;
}

:deep(.upload-file-container:hover) {
  border-color: var(--color-primary-6);
  background: linear-gradient(
    135deg,
    var(--color-primary-light-2) 0%,
    var(--color-primary-light-3) 100%
  );
  box-shadow: 0 2px 8px rgba(var(--arcoblue-6), 0.15);
}

:deep(.upload-file-container.is-dragover) {
  border-color: var(--color-primary-6);
  background: linear-gradient(
    135deg,
    var(--color-primary-light-3) 0%,
    var(--color-primary-light-4) 100%
  );
  box-shadow: 0 0 0 2px var(--color-primary-light-3),
    0 4px 12px rgba(var(--arcoblue-6), 0.2);
}

/* 上传区域样式 */
:deep(.upload-dragger) {
  padding: 24px;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(var(--arcoblue-1), 0.3) 0%,
    rgba(var(--arcoblue-2), 0.5) 100%
  );
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.upload-dragger:hover) {
  background: linear-gradient(
    135deg,
    rgba(var(--arcoblue-2), 0.5) 0%,
    rgba(var(--arcoblue-3), 0.7) 100%
  );
  transform: translateY(-1px);
}

:deep(.upload-dragger .arco-upload-drag-icon) {
  font-size: 48px;
  color: var(--color-text-3);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

:deep(.upload-dragger:hover .arco-upload-drag-icon) {
  color: var(--color-primary-6);
  transform: scale(1.1);
}

:deep(.upload-dragger .arco-upload-drag-text) {
  font-size: 16px;
  color: var(--color-text-1);
  font-weight: 500;
  margin-bottom: 8px;
}

:deep(.upload-dragger .arco-upload-drag-tip) {
  font-size: 14px;
  color: var(--color-text-3);
  line-height: 1.5;
}

/* 文件列表样式 */
:deep(.arco-upload-list) {
  margin-top: 16px;
}

:deep(.arco-upload-list-item) {
  border-radius: 8px;
  border: 1px solid var(--color-primary-light-4);
  background: linear-gradient(
    135deg,
    var(--color-bg-2) 0%,
    var(--color-primary-light-1) 100%
  );
  margin-bottom: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

:deep(.arco-upload-list-item:hover) {
  border-color: var(--color-primary-6);
  background: linear-gradient(
    135deg,
    var(--color-primary-light-1) 0%,
    var(--color-primary-light-2) 100%
  );
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--arcoblue-6), 0.2);
}

:deep(.arco-upload-list-item-content) {
  display: flex;
  align-items: center;
  gap: 12px;
}

:deep(.arco-upload-list-item-file-icon) {
  font-size: 24px;
  color: var(--color-primary-6);
  flex-shrink: 0;
}

:deep(.arco-upload-list-item-name) {
  flex: 1;
  font-size: 14px;
  color: var(--color-text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.arco-upload-list-item-status) {
  font-size: 12px;
  color: var(--color-text-3);
}

:deep(.arco-upload-list-item-operation) {
  display: flex;
  gap: 8px;
  align-items: center;
}

:deep(.arco-upload-list-item-operation .arco-btn) {
  padding: 4px 8px;
  height: 28px;
  font-size: 12px;
  border-radius: 4px;
}

/* 进度条样式 */
:deep(.arco-upload-progress) {
  margin-top: 8px;
}

:deep(.arco-progress-line-outer) {
  background: var(--color-fill-2);
  border-radius: 4px;
  overflow: hidden;
}

:deep(.arco-progress-line-inner) {
  background: linear-gradient(
    90deg,
    var(--color-primary-6) 0%,
    var(--color-primary-5) 100%
  );
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 图片预览样式 */
:deep(.arco-upload-list-picture .arco-upload-list-item) {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

:deep(.arco-upload-list-picture .arco-upload-list-item-thumbnail) {
  border-radius: 6px;
  overflow: hidden;
}

:deep(.arco-upload-list-picture .arco-upload-list-item-operation) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 4px;
  opacity: 0;
  transition: all 0.3s ease;
}

:deep(
    .arco-upload-list-picture
      .arco-upload-list-item:hover
      .arco-upload-list-item-operation
  ) {
  opacity: 1;
}

:deep(.arco-upload-list-picture .arco-upload-list-item-operation .arco-btn) {
  background: transparent;
  border: none;
  color: white;
  padding: 4px;
  width: 28px;
  height: 28px;
}

:deep(
    .arco-upload-list-picture .arco-upload-list-item-operation .arco-btn:hover
  ) {
  background: rgba(255, 255, 255, 0.2);
}

/* 错误状态样式 */
:deep(.arco-upload-list-item-error) {
  border-color: var(--color-danger-light-4);
  background: var(--color-danger-light-1);
}

:deep(.arco-upload-list-item-error .arco-upload-list-item-file-icon) {
  color: var(--color-danger-6);
}

:deep(.arco-upload-list-item-error .arco-upload-list-item-name) {
  color: var(--color-danger-6);
}

/* 成功状态样式 */
:deep(.arco-upload-list-item-done .arco-upload-list-item-file-icon) {
  color: var(--color-success-6);
}

/* 上传按钮样式 */
:deep(.arco-upload-trigger) {
  border-radius: 8px;
  border: 1px dashed var(--color-primary-light-4);
  background: linear-gradient(
    135deg,
    var(--color-primary-light-1) 0%,
    var(--color-primary-light-2) 100%
  );
  transition: all 0.3s ease;
  cursor: pointer;
}

:deep(.arco-upload-trigger:hover) {
  border-color: var(--color-primary-6);
  background: linear-gradient(
    135deg,
    var(--color-primary-light-2) 0%,
    var(--color-primary-light-3) 100%
  );
  box-shadow: 0 2px 8px rgba(var(--arcoblue-6), 0.15);
  transform: translateY(-1px);
}

:deep(.arco-upload-trigger .arco-btn) {
  border: none;
  background: linear-gradient(
    135deg,
    var(--color-primary-6) 0%,
    var(--color-primary-5) 100%
  );
  color: white;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(var(--arcoblue-6), 0.2);
}

:deep(.arco-upload-trigger .arco-btn:hover) {
  background: linear-gradient(
    135deg,
    var(--color-primary-5) 0%,
    var(--color-primary-4) 100%
  );
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--arcoblue-6), 0.3);
}

/* 文件上传区域样式 */
.file-upload-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.file-upload-section:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 16px;
}

.section-header h3 {
  color: #1e293b;
  font-weight: 600;
  margin: 0;
}

.section-header p {
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* 已有文件展示区域样式 */
.existing-files-container {
  background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-top: 16px;
}

.file-item-card {
  transition: all 0.3s ease;
}

.file-item-card:hover {
  transform: translateY(-2px);
}

.file-item-card .file-card {
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  transition: all 0.3s ease;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.file-item-card .file-card:hover {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.file-icon .arco-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 网格布局样式 */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gap-4 {
  gap: 1rem;
}

.space-x-3 > * + * {
  margin-left: 0.75rem;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.min-w-0 {
  min-width: 0;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-2 {
  gap: 0.5rem;
}

.h-full {
  height: 100%;
}

.existing-files-container .file-icon :deep(.arco-avatar) {
  background: var(--color-primary-light-1);
  color: var(--color-primary-6);
  border-radius: 6px;
  font-weight: 500;
}

.existing-files-container :deep(.arco-btn-mini) {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.existing-files-container :deep(.arco-btn-mini.arco-btn-status-danger) {
  background: var(--color-danger-6);
  border-color: var(--color-danger-6);
  color: white;
  box-shadow: 0 1px 2px rgba(var(--red-6), 0.2);
}

.existing-files-container :deep(.arco-btn-mini.arco-btn-status-danger:hover) {
  background: var(--color-danger-5);
  border-color: var(--color-danger-5);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(var(--red-6), 0.3);
}

/* 文件信息样式优化 */
.existing-files-container .file-card .font-medium {
  color: var(--color-text-1);
  font-weight: 600;
  line-height: 1.4;
}

.existing-files-container .file-card .text-gray-500 {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 1.3;
}

/* 提示信息样式 */
.text-gray-400 {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 1.4;
}

/* 信息图标样式 */
:deep(.arco-icon) {
  transition: all 0.2s ease;
}

:deep(.arco-icon:hover) {
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 16px;
  }

  :deep(.arco-form) {
    padding: 16px;
  }

  .top-bar {
    padding: 12px 16px;
  }

  .action-buttons {
    margin-top: 16px;
    padding-top: 12px;
  }
}
</style>
